<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>detail</title>
    <link rel="stylesheet" type="text/css" href="../css/page/detail.css" />
    <link rel="stylesheet" type="text/css" href="../css/font/iconfont.css" />
</head>

<body>
    <div class="page" @vue:mounted="mounted">
        <!-- dq_topback,title=商品详情 -->
        <div class="nav-bar">
            <div onclick="core.back()" class="nav-bar-back">
                <span class="icon iconfont icon-fanhui m_r_10"></span>
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">商品详情</span>
        </div>
        <div class="detail-iframe">
            <!-- 轮播图 -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item of data.proDetail.images">
                        <img :src="item" alt="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>

            <div class="suject-box">
                <div class="stitle-weather">
                    <span class="title">{{data.proDetail.scenicname}}</span>
                    <span class="weather" v-if="data.testDisplay"> 晴朗 </span>
                </div>

                <div class="recomed-info">
                    <div class="cur-column start-way">
                        <div class="price-col">
                            <span class="price"><i class="unit">￥</i>40</span>
                        </div>
                        <span class="tip">参考门市价</span>
                    </div>
                    <div class="cur-column">
                        <span> <i class="level">5A景区</i> <i class="type">人文景观</i></span>
                        <span class="right-link" v-if="data.testDisplay"> <i class="icon-info"></i> 简介 <i
                                class="icon-arrow"></i> </span>
                    </div>
                    <div class="cur-column address">
                        <span class="left-addr">{{data.proDetail.scenicaddress}}</span>
                        <span class="right-link" v-if="data.testDisplay"> <i class="icon-map"></i> 地图 <i
                                class="icon-arrow"></i> </span>
                    </div>
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="detail-good">
                <div class="normal-box">
                    <ul class="tab-menu" @click="switchTab">
                        <li :class="{actived:data.currentTag=='1'}" data-tag="1">景区介绍</li>
                        <li data-tag="2" :class="{actived:data.currentTag=='2'}">交通出行</li>
                        <li data-tag="3" :class="{actived:data.currentTag=='3'}">注意事项</li>
                    </ul>
                    <div class="content">
                        <div v-if="data.currentTag=='1' ">
                            {{data.proDetail.scenicname}}环境优美，欢迎您的光顾！
                        </div>
                        <div v-if="data.currentTag=='1' && data.proDetail.scenicdescription"
                            v-html="data.proDetail.scenicdescription">

                        </div>

                        <div v-if="data.currentTag=='2'">

                            <div v-if="data.proDetail.opentime">

                                {{data.proDetail.opentime}}

                            </div>
                            <div v-else>
                                全年 10:00-18:00开放; <br>
                                说明：具体开放时间以当日实际情况为准
                            </div>

                        </div>
                        <div v-if="data.currentTag=='3'">
                            <ul v-if="data.proDetail.booknotice">
                                <li v-for="(item,index) in data.proDetail.booknotice" :key="index"> {{index+1}}.
                                    {{item.name}} {{item.value}}</li>
                            </ul>
                            <ul v-else>
                                <li> 1. 优待政策 儿童:1米以下（含）儿童免票，需监护人凭票陪同入场。【免费】</li>
                                <li> 2. 游玩时长 建议游玩时间：09:00-18:00</li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-fix">
            <div class="info-tip">
                <span> <i class="key-amount">20.00</i> 消费积分游玩</span>
                <span>可用<i class="score">{{data.proDetail.commentscore}}</i>积分消费积分</span>
            </div>
            <div class="btn-exchange" v-if="data.testDisplay">立即兑换</div>
        </div>

    </div>
</body>

<script src="../script/api.js"></script>
<script src="../script/swiper-bundle.min.js"></script>
<script src="../script/common.js"></script>


<script type="module">
    import { createApp } from 'https://www.chenxiangle.com/app/web/script/pvue.js';
    const APP = () => {
        createApp({
            data: {
                testDisplay: false,
                proDetail: {},
                currentTag: '1',
                bannerList: [{
                    id: 1,
                    img: '../images/home/banner1.png'
                }, {
                    id: 2,
                    img: '../images/home/banner2.png'
                }, {
                    id: 3,
                    img: '../images/home/banner1.png'
                }],

            },
            async getProDetail() {
                let id = core.getParam("id");
                let res = await core.tra.get({ id });
                this.data.proDetail = res.data.data;
                this.data.proDetail.booknotice = JSON.parse(res.data.data.booknotice);
                this.data.proDetail.images = JSON.parse(res.data.data.images);

            },
            switchTab(ev) {
                let kind = ev.target.dataset.tag;
                this.data.currentTag = kind;

            },
            onbuy() {
                api.openWin({
                    name: 'place_order',
                    url: './place_order.html'
                })
            }, oncart() {
                api.openWin({
                    name: 'shopping_cart',
                    url: './shopping_cart.html',
                    pageParam: {
                        param: '1'
                    }
                })
            }, onshare() {
                api.openWin({
                    name: 'other',
                    url: './other.html?action=other&id=' + this.data.pro.id,
                    pageParam: {
                        param: '1'
                    }
                })
            },
            mounted() {
                this.getProDetail();

            }
        }).mount()
    }

    window.apiready = () => {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
        setTimeout(() => {
            var swiper = new Swiper(".mySwiper", {
                autoplay: true,
                pagination: {
                    el: ".swiper-pagination",
                    type: "fraction",
                },
            });
        }, 200);
    }

</script>


</html>